<template>
    <div class="payContainer">
      <h2 class="header">请选择支付方式</h2>
      <van-radio-group v-model="checked" class="main">
        <van-radio name="1" class="mainItem">
          <van-icon name="alipay" color="#1989fa"/>
          支付宝
        </van-radio>
        <hr/>
        <van-radio name="2" class="mainItem">
          <van-icon name="wechat" color="#00c901"/>
          微信
        </van-radio>
      </van-radio-group>
      <van-dialog v-model:show="show" title="支付" show-cancel-button @cancel="onClickOverlay" @confirm="toPay">
      <!-- < img :src="imgUrl" /> -->
        <img :src="imgUrl" alt="">
      </van-dialog>
      <van-button type="primary" block class="floor" @click="toIndex">确定</van-button>
    </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'Pay'
  })
</script>
<script lang="ts" setup>
import QRCode from 'qrcode'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { shopDataStore } from '@/stores/shopcart';
const shopStore = shopDataStore()
const checked = ref('1');
const router=useRouter()
const show = ref(false);
const imgUrl=ref('')
const toIndex=async()=>{
  shopStore.reqPay()
  show.value=true
  QRCode.toDataURL("weixin://wxpay/bizpayurl?pr=ez6E2Zpzz")
  .then((url: string) => {
    imgUrl.value = url
  })
  .catch((err: any) => {
    console.error(err)
  })
}


const onClickOverlay=()=>{
  alert('用户取消了支付')
}
const toPay=()=>{
  show.value=false
  router.push('/index')
}
</script>

<style lang="less" scoped>
.payContainer{
  position: relative;
  height: 100%;
  .header{
    font-size: 15px;
    font-weight: normal;
    padding: 20px 0 20px 10px;
    
  }
  .main{
    background-color: white;
    height: 100px;
    font-size: 20px;
    font-weight: bold;
    hr{
      height: 1px;
      background-color: wheat;
    }
    .mainItem{
      margin: 20px 0;
      
    }
  }
  img{
    width: 200px;
    height: 200px;
    margin-left:60px;
  }
  .floor{
    position: fixed;
    bottom: 0;
  }
}
</style>
